<template>
  <div class="box">
    <div class="footer-container">
      <div class="footer-column">
        <h2>联系我们</h2>
        <ul>
          <li><a href="#">在线客服</a></li>
          <li><a href="#">电话客服：400-100-5678</a></li>

        </ul>
      </div>
      <div class="footer-column">
        <h3>产品与服务</h3>
        <ul>
          <li><a href="#">咨询与合作：gongyi-hz@aixinzhu.com</a></li>
          <li><a href="#">投诉与建议：gongyi-ts@aixinzhu.com</a></li>
          <li><a href="#">全国社会组织查询</a></li>
          <li><a href="#">非法社会组织举报</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3>资源链接</h3>
        <ul>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </div>

      <a href="javascript:;" class="login" @click="toAdmin">管理员登陆</a>
      <a href="javascript:;" class="login" @click="toPubsh">捐赠收入公示</a>

    </div>
    <!--<img src="https://gd-hbimg.huaban.com/830a7ad9e0972daf03a64ab9656251bd760cfa2131b5-wwxRtp_fw240webp" alt="">-->
    <p class="footer-copy">&copy; Copyright © 2010-2021 aixinzhu.All Rights Reserved 爱心助公益平台版权所有</p>

  </div>


</template>

<script>
export default {
  name: "FrontFoot",
  methods: {
    toAdmin() {
      this.$router.push("/adminlogin")
    },
    toPubsh() {
      this.$router.push("/front/publicity")
    },
  }
}
</script>

<style scoped>
.box {
  background-color: #f2f2f2;
  padding: 20px;
  color: #333;
  font-size: 14px;

}

.footer-container {
  display: flex;

  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
}

.footer-column {
  width: 30%;
}

h3 {
  color: #868484;
  font-size: 18px;
}

.footer h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.footer ul li {
  margin-bottom: 5px;
  list-style: none;
}

.footer ul li a {
  color: #333;
  text-decoration: none;
}

.footer ul li a:hover {
  text-decoration: underline;
}

.footer-copy {
  margin-left: 150px;
  margin-top: 20px;
}

.login {
  text-align: right;
  margin-left: -100px;
  font-size: 20px;
}


</style>